<template>
  <div>
    <!-- 卡片视图区域 -->
    <el-card>
      <el-row :gutter="20">
        <el-col :span="3">
            <el-select v-model="queryInfo.types" placeholder="选择日志类型" label="选择类型" @change="getLogList">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
          </el-col>
      </el-row>

      <!-- 列表区域 -->
      <el-table
        :data="userList"
        border
        stripe
        style="width: 100%">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="username" label="操作用户" width="150px"></el-table-column>
        <el-table-column prop="adminRoleHasOne.name" label="用户角色" width="120px"></el-table-column>
        <el-table-column prop="type_name" label="类型" width="130px"></el-table-column>
        <el-table-column prop="msg" label="操作信息"></el-table-column>
        <el-table-column prop="create_time" label="操作时间" width="150px"></el-table-column>
        <el-table-column prop="ip" label="操作IP" width="120px"></el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 5, 10, 20]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
  </div>

</template>

<script>
export default {
  data() {
    return {
      // 获取用户列表参数对象
      queryInfo: {
        types: '',
        // 当前的页数
        pagenum: 1,
        // 当前每页显示数目
        pagesize: 10
      },
      options: [
        {
          value: 'sys',
          label: '系统日志'
        },
        {
          value: 'mat',
          label: '素材操作日志'
        },
        {
          value: 'pro',
          label: '节目单操作日志'
        }
      ],
      userList: [],
      total: 0
    }
  },
  created() {
    this.getLogList()
  },
  methods: {
    async getLogList() {
      const { data: res } = await this.$http.get('Log/list', {
        params: this.queryInfo
      })
      // console.log(res, '**********')
      if (res.meta.status !== 200) {
        return this.$message.error('获取用户列表失败！')
      }
      this.userList = res.data.log
      this.total = res.data.total
    },
    // 监听pagesize 改变的事件
    handleSizeChange(nesSize) {
      // console.log(nesSize)
      this.queryInfo.pagesize = nesSize
      this.getLogList()
    },
    // 监听 当前页码数改变事件
    handleCurrentChange(currPage) {
      this.queryInfo.pagenum = currPage
      this.getLogList()
      // console.log(currPage)
    }
  }
}
</script>

<style lang="less" scoped>

</style>
